<template>
  <view class="all-service">
    <view class="page-container">
      <view class="title"> 所有服务 </view>

      <view
        class="service-item"
        v-for="(item, index) in [1, 1]"
        :key="index"
        @click="toService(item)"
      >
        <image src="@/static/image/common/test.png" mode="aspectFill" />

        <view class="content">
          <view class="name text-line"> 中式推拿·SPA新人体验套餐A </view>
          <view class="tips text-line"> 120分钟丨舒经活络丨解压放松 </view>
          <view class="bottom flex flex-between flex-bottom">
            <view class="price flex flex-middle">
              ￥298
              <text> 月售13 </text>
            </view>
            <view @click.stop="createOrder">
              <reservation />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toService(item) {
      this.$navigateTo(`/pages/service/detail?id=${item}`);
    },
    createOrder() {
      this.$checkLogin();
      this.$navigateTo(`/pages/order/create`);
    },
  },
};
</script>

<style scoped lang="scss">
.all-service {
  padding: 0 16px;

  .service-item {
    overflow: hidden;
    padding: 12px 0;
    border-top: 1px solid #f6f6f6;

    .content {
      padding-left: 80px;

      .bottom {
        margin-top: 5px;

        .price {
          color: #ed6041;
          font-size: 18px;

          text {
            font-size: 12px;
            color: #9d9d9d;
            margin-left: 6px;
          }
        }
      }

      .tips {
        font-size: 12px;
        color: #9d9d9d;
        margin-top: 4px;
      }

      .name {
        color: #222;
      }
    }

    image {
      width: 72px;
      height: 72px;
      float: left;
      border-radius: 8px;
    }
  }

  .title {
    height: 38px;
    line-height: 38px;
    color: #383838;
  }
}
</style>